<template>
    <div>
       <!-- tab栏 -->
       <div class="head">
            <image :src="src1" class="headd" resize="cover" @click="biu()"></image>
            <div class="shop_name">
                <text class="shop" @click="show_shop()">商品</text>
                <text class="shop" @click="show_category()">分类</text>
            </div>
        </div> 
        <div class="line">
            <div class="line1" v-if="show"></div>
            <div class="line2" v-if="!show"></div>
        </div>
        <div class="shop_pic" v-if="show1">
            <image :src="src2" class="shop_img"></image>
        </div>
        <text class="add_shop" v-if="show1">货架上还没有商品呢~快来添加</text>
        <div class="shop_add" @click="shopAdd()" v-if="show1">
            <image :src="src3" class="shop_ten"></image>
        </div>
        <text class="onclick" v-if="show1">点我可以添加商品哦</text>
        <!-- 分类 -->
        <!-- 分类 -->
        <!-- 分类 -->
        <!-- 分类 -->
        <div class="classify" v-if="show2">
            <div class="shop_pic">
                <image :src="src4" class="shop_img"></image>
            </div>
            <text class="add_shop">商品种类有助于商品的统一管理快去</text>
            <text class="add_shop1">添加商品种类吧~</text>
            <div class="shop_add2">
                <image :src="src3" class="shop_ten" @click="shopp()"></image>
            </div>
            <text class="onclick">点我可以添加商品种类哦</text>
        </div>
    </div>
</template>
<style scoped>
    .head{
        width: 100%;
        height: 48px;
        padding-top: 12px;
        /*background-color: pink;*/
        box-sizing: border-box;
        line-height: 32px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /*margin-top: 17px;*/
       /* position: fixed;
        top: 0;
        left: 0;*/
        /*box-shadow: 1px 1px 1px #ccc;*/
        background-color: #fff;
        /*position: relative;*/
        /*z-index: 2; */
    }
    .headd{
        width: 15px;
        height: 20px;
        /*background-color: #33c179;*/
        /*position: fixed;*/
        position: absolute;
        left: 12px;
    }
   .shop_name{
        width: 98px;
        flex-direction: row;
        /*background-color: pink;*/
        justify-content: space-between;
   }
    .shop{
        font-size: 16px;
        font-weight: bold;
    }
    .line{
        width: 118px;
        height: 4px;
        margin-left: auto;
        margin-right: auto;
        /*background-color: pink;*/
        flex-direction: row;
        position: relative;
        justify-content: space-between;
        position: relative;
    }
    .line1{
        width: 48px;
        height: 4px;
        background-color: #33c179;
        border-radius: 25px;
        position: absolute;
        left: 0;
    }
    .line2{
        width: 48px;
        height: 4px;
        background-color: #33c179;
        border-radius: 25px;
        position: absolute;
        right: 0;
    }
    .shop_pic{
        width: 95px;
        height: 95px;
        border-radius: 50%;
        margin-top: 91px;
        /*background-color: pink;*/
        margin-left: auto;
        margin-right: auto;
    }
    .shop_img{
        width: 100%;
        height: 100%;
    }
    .shop_add{
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #70d3a1;
        margin-right: auto;
        margin-left: auto;
        margin-top: 225px;
        justify-content: center;
        align-items: center;
    }
    .shop_add2{
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #70d3a1;
        margin-right: auto;
        margin-left: auto;
        margin-top: 219px;
        justify-content: center;
        align-items: center;
    }
    .shop_ten{
        width: 32px;
        height: 30px;
    }
    .onclick{
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
        line-height: 14px;
        color: #999;
        margin-top: 31px;
    }
    .add_shop{
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
        line-height: 14px;
        margin-top: 34px;
        color: #666;
    }
    .add_shop1{
        width: 100%;
        height: 14px;
        font-size: 14px;
        line-height: 14px;
        text-align: center;
        margin-top: 5px;
        color: #666;
    }
    .onclick1{
        width: 100%;
        height: 14px;
        text-align: center;
        line-height: 14px;
        margin-top: 31px;
    }
</style>
<script>
export default {
    data () {
        return {
          src1: 'http://192.168.2.123:8080/img/index_back.png',
          show: true,
          src2: 'http://192.168.2.123:8080/img/index_pic.png',
          src3: 'http://192.168.2.123:8080/img/shop_add1.png',
          show1: true,
          src4: 'http://192.168.2.123:8080/img/index_pic.png',
          show2: false,
        }
    },
    methods: {
        // 点击返回
        biu(){
            this.$router.back(-1);
        },
        // 点击商品
        show_shop(){
            this.show = true;
            this.show1 = true;
            this.show2 = false;
        },
        // 点击分类
        show_category(){
            this.show = false;
            this.show1 = false;
            this.show2 = true;
        },
        // 点击添加商品
        shopAdd(){
            this.$router.push('/shop_add_goods');
        },
        // 点击分类添加
        shopp(){
            this.$router.push('/catery_shop');
        },
    }
}
</script>